<template>
  <div>

    <el-card class="box-card " style="height: 70px ">

      <el-col :span="8" class="right">
        <el-button type="primary" size="small" @click="handleAdd()">新增账户</el-button>
      </el-col>

      <el-col :span="16" class="right">
        <el-input
          placeholder="搜索账户名称"
          prefix-icon="el-icon-search"
          v-model="input1"
          style="width: 300px;"
          size="small"
          clearable
        >
        </el-input>
        <el-button type="primary" icon="el-icon-search" size="small">搜索</el-button>

      </el-col>
    </el-card>

    <el-card class="box-card">
      <el-table
        :data="responseData.records"
        style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          width="auto">
          <!--    <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
              </template>-->
        </el-table-column>

        <el-table-column
          prop="name"
          label="账户名称"
          width="180">
        </el-table-column>

        <el-table-column
          prop="depositBank"
          label="开户银行"
          width="180">
        </el-table-column>

        <el-table-column
          prop="accountBalance"
          label="账户余额(元)"
          width="180">
        </el-table-column>

        <el-table-column
          prop="status"
          label="状态"
          width="180">
        </el-table-column>

        <el-table-column
          prop="remark"
          label="备注"
          width="180">
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--      :total="responseData.total"-->
      <el-pagination
        @current-change="handleCurrentChange"
        background
        layout="prev, pager, next"
        style="margin-top:20px"

        :total="responseData.total"
        :page-size="responseData.size"
        :page-count="responseData.pages"
        :current-page="responseData.current"
        page-sizes="[10, 20, 30, 40, 50, 100]"
      >
      </el-pagination>
    </el-card>

    <!--   新增商品单位 -->
    <el-dialog
      title="新增账户"
      :visible.sync="addDialogVisible"
      width="30%"
      :show-close="false"
      :close-on-click-modal="false"
      :before-close="handleClose">

      <el-form ref="form" :model="responseData.form" label-width="80px">

        <el-form-item label="账户名称">
          <el-input size="small" v-model="responseData.form.name"></el-input>
        </el-form-item>

        <el-form-item label="开户银行">
          <el-input size="small" v-model="responseData.form.depositBank"></el-input>
        </el-form-item>

        <el-form-item label="银行账号">
          <el-input size="small" v-model="responseData.form.bankAccount"></el-input>
        </el-form-item>

        <el-form-item label="期初余额">
          <el-input size="small" v-model="responseData.form.openingBalance"></el-input>
        </el-form-item>
        <el-form-item label="备注名称">
          <el-input v-model="responseData.form.remark" type="textarea"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmitAdd()">新增</el-button>
          <el-button @click="onCancel()">取消</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>

    <!--   修改商品单位 -->
    <el-dialog
      title="修改账户"
      :visible.sync="updateDialogVisible"
      width="30%"
      :show-close="false"
      :close-on-click-modal="false"
      :before-close="handleClose">

      <el-form ref="form" :model="responseData.form" label-width="80px">

        <el-form-item label="账户名称">
          <el-input size="small" v-model="responseData.form.name"></el-input>
        </el-form-item>

        <el-form-item label="开户银行">
          <el-input size="small" v-model="responseData.form.depositBank"></el-input>
        </el-form-item>

        <el-form-item label="银行账号">
          <el-input size="small" v-model="responseData.form.bankAccount"></el-input>
        </el-form-item>

        <el-form-item label="期初余额">
          <el-input size="small" v-model="responseData.form.openingBalance"></el-input>
        </el-form-item>
        <el-form-item label="备注名称">
          <el-input v-model="responseData.form.remark" type="textarea"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmitUpdate()">确认修改</el-button>
          <el-button @click="onCancel()">取消</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>

  </div>

</template>

<script>
  export default {
    name: "Account",
    data() {
      return {
        //新增商品单位
        addDialogVisible: false,
        //修改
        updateDialogVisible: false,
        responseData: {
          //列表
          records: [],

          form: {
            id: null,
            name: "",
            depositBank: "",
            bankAccount: "",
            openingBalance: 0.00,
            accountBalance: 0.00,
            remark: null,
            deleted: 0,
            status: 1,
            createTime: null
          },
          total: 0,
          size: 5,
          current: 1,
          orders: [],
          searchCount: true,
          pages: 1
        }
      }
    },
    mounted: function () {
      this.handleSelect()

    },
    methods: {
      handleSelect() {
        this.axios({
            method: 'post',
            url: 'http://localhost:8080/account/getList',
            data: {current: this.responseData.current, size: this.responseData.size}
          }
        ).then((response) => {
          let res = response.data;
          if (res.code === 200) {
            this.responseData.total = res.data.total;
            this.responseData.pages = res.data.pages;
            this.responseData.records = res.data.records;
          }
        });
      },
      handleCurrentChange(val) {
        this.axios({
            method: 'post',
            url: 'http://localhost:8080/account/getList',
            data: {current: val, size: 5}
          }
        ).then((response) => {
          let res = response.data;
          if (res.code === 200) {
            this.responseData.total = res.data.total;
            this.responseData.pages = res.data.pages;
            this.responseData.records = res.data.records;
          }
        });
      },
      handleAdd() {
        this.addDialogVisible = true;
      },
      onSubmitAdd() {
        this.axios({
          method: 'post',
          url: 'http://localhost:8080/account/insert',
          data: this.responseData.form
        }).then((response) => {
          const data = response.data;
          if (data.code === 200) {
            this.handleSelect();
            this.$message({message: data.message, type: 'success'});
            alert(this.addDialogVisible);
            this.addDialogVisible = false;
            alert(this.addDialogVisible);
          }
        });
      },
      //取消按钮
      onCancel() {
        this.addDialogVisible = false;
        this.updateDialogVisible = false;

      },
      // 删除
      handleDelete(index, row) {

        this.axios.post('http://localhost:8080/account/deleteById?id=' + row.id).then((response) => {
          const res = response.data;
          if (res.code === 200) {
            this.handleSelect();
            this.$message({message: res.message, type: 'success'});
          }
        });
      },
      //编辑
      handleEdit(index, row) {
        this.responseData.form = row;
        this.updateDialogVisible = true;
      },

      onSubmitUpdate() {

        this.axios({
          method: 'post',
          url: 'http://localhost:8080/account/updateById',
          data: this.responseData.form
        }).then((response) => {
          const res = response.data;
          if (res.code === 200) {
            this.handleSelect();
            this.$message({message: res.message, type: 'success'});
          }
        });
        this.updateDialogVisible = false;
      },
    }
  }
</script>

<style scoped>
  .box-card {
    margin-bottom: 10px;
    /*text-align: center;*/
    /*position: absolute;*/
  }

</style>
